<script lang="ts" setup>
import {UnwrapNestedRefs} from "vue";
import {CommonArea} from "@/Game/CommonArea";
import {AllDishListDesc} from "@/Game/Dish";
import {useAppStore} from "@/stores/app";

const appStore = useAppStore();
const persistentEventChanged = ref(false);

const {commonArea} = defineProps<{
    commonArea: UnwrapNestedRefs<CommonArea>
}>();

watch(() => commonArea.persistentEvent, async (newEvent, oldEvent) => {
    if (newEvent || oldEvent) {
        persistentEventChanged.value = true;
        setTimeout(() => {
            persistentEventChanged.value = false;
        }, 1201);
    }
});
</script>

<template>
    <div style="max-height: 100%; position: relative;">
        <div style="height: 100%; padding: 0.5rem; display: grid; grid-template-columns: auto auto auto; gap: 0.5rem; grid-template-rows: auto auto; position: relative;">
            <v-sheet :class="$style.sheet" :color="commonArea.customerQueueEnabled ? 'rgba(var(--v-theme-warning), 0.2)' : undefined" :elevation="commonArea.customerQueueEnabled ? 4: 0" border rounded style="grid-row: 1 / 3; width: fit-content; overflow: hidden;">
                <v-card :class="$style['draw-pile']" :text="`剩余：${commonArea.customerAndEventDrawPile.length}`" color="surface-light" title="牌堆 客人/事件">
                    <v-tooltip activator="parent" location="bottom start">共 36 种客人，各 2 张，和 9 种事件，各 1 张</v-tooltip>
                </v-card>
                <v-divider/>
                <div :class="$style['scroll-container']" :style="{height: `${commonArea.customerQueueSize * (appStore.wideScreen ? 10.5 : 6)}rem`, maxHeight: appStore.wideScreen ? undefined : '35.1rem'}" style="height: fit-content;">
                    <transition-group :enter-from-class="$style['queue-enter-from']" :enter-to-class="$style['queue-enter-to']" :leave-active-class="$style['queue-leave-active']">
                        <CustomerCard v-for="(item, index) in commonArea.customerQueue" :key="item.ID" :class="$style.card" :customer="item" :enabled="commonArea.customerQueueEnabled" :selected="commonArea.humanSelectingCustomer && commonArea.selectedCustomerIndex === index" @click="commonArea.serveCustomer(index);"/>
                    </transition-group>
                </div>
            </v-sheet>
            <v-sheet :class="$style.sheet" :color="commonArea.shopAndDishQueueEnabled ? 'rgba(var(--v-theme-warning), 0.2)' : undefined" :elevation="commonArea.shopAndDishQueueEnabled ? 4: 0" border rounded style="grid-column: 2; grid-row: 1 / 3; width: fit-content; overflow: hidden;">
                <v-card :class="$style['draw-pile']" :text="`剩余：${commonArea.shopDrawPile.length}`" color="surface-light" title="牌堆 店铺">
                    <v-tooltip activator="parent" location="bottom start">共 12 种店铺，各 3 张</v-tooltip>
                </v-card>
                <v-divider/>
                <div :class="$style['scroll-container']" :style="{height: appStore.wideScreen ? '42.6rem' : '35.1rem'}">
                    <transition-group :enter-from-class="$style['queue-enter-from']" :leave-active-class="$style['queue-leave-active']">
                        <ShopCard v-for="(item, index) in commonArea.shopQueue" :key="item.ID" :class="$style.card" :enabled="commonArea.shopAndDishQueueEnabled" :shop="item" @click="commonArea.purchaseShop(index);"/>
                    </transition-group>
                </div>
            </v-sheet>
            <v-sheet :class="$style.sheet" :color="commonArea.shopAndDishQueueEnabled ? 'rgba(var(--v-theme-warning), 0.2)' : undefined" :elevation="commonArea.shopAndDishQueueEnabled ? 4: 0" border rounded style="grid-column: 3; min-height: 7.6rem; max-height: 25.6rem; width: 100%;">
                <div :class="$style['scroll-container']" style="height: calc(100% - 1rem); max-height: 25.5rem;">
                    <DishCard v-for="(item, index) in AllDishListDesc" :key="index" :disabled="commonArea.dishCount[item.Class] <= 0" :dish="item" :dish-count="commonArea.dishCount" :enabled="commonArea.shopAndDishQueueEnabled" style="width: 100%; height: 5.5rem; margin: 0; flex-shrink: 0;" @click="commonArea.purchaseDish(index);"/>
                </div>
            </v-sheet>
            <v-sheet border rounded style="grid-column: 3; grid-row: 2; min-height: 7.6rem; max-height: 18.1rem; height: 100%; align-self: end; width: fit-content;">
                <div :class="$style['scroll-container']" style="height: calc(100% - 1rem); max-height: 18rem; padding-bottom: 0.5rem;">
                    <v-card :class="[$style.card, persistentEventChanged ? 'cardRotateX': '']" :color="commonArea.lastEvent?.Color ?? 'surface-light'" style="height: 10rem;" title="告示架">
                        <template v-slot:append>
                            <span v-if="commonArea.lastEvent?.Persistent">🕰️ </span><span>{{commonArea.lastEvent?.Name}}</span>
                        </template>
                        <v-card-text style="overflow: auto; height: calc(100% - 3.5rem); scrollbar-width: thin;">
                            <div v-if="commonArea.lastEvent" v-html="commonArea.lastEvent.Description"></div>
                            <span v-else>无事件</span>
                        </v-card-text>
                        <v-tooltip activator="parent" location="top start">若事件牌上有 🕰️ 图标则效果为持续性效果，否则为一次性效果。</v-tooltip>
                    </v-card>
                    <v-divider/>
                    <v-card :class="$style.card" :text="`数量：${commonArea.customerAndEventDiscardPile.length}`" color="surface-light" style="height: 5.5rem;" title="弃牌堆 客人/事件"/>
                </div>
            </v-sheet>
        </div>
        <v-btn :disabled="!commonArea.shopAndDishQueueEnabled" :style="{bottom: appStore.wideScreen ? '2rem' : '0.25rem'}" color="primary" rounded style="position: absolute; left: 50%; transform: translateX(-50%);" @click="commonArea.purchaseCompleted();">不购买</v-btn>
    </div>
</template>

<style module>
.sheet {
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.draw-pile {
    width: 16.4rem;
    height: 5.5rem;
    margin: 0.5rem;
}

.scroll-container {
    max-height: calc(100% - 7.1rem);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-top: 0.5rem;
    padding: 0 0.5rem 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card {
    overflow: hidden;
    width: 16.4rem;
    height: 10rem;
    flex-shrink: 0;
    transition: transform 0.4s ease, height 0.4s ease, opacity 0.4s ease, background-color 0.4s ease;
}

@media screen and (max-width: 900px), (max-height: 900px) {
    .draw-pile {
        width: 12rem;
    }

    .card {
        width: 12rem;
        height: 8rem;
    }
}

.queue-enter-from {
    height: 0;
}

.queue-enter-to {
    height: 10rem;
}

.queue-leave-active {
    animation: queue-animation 1s;
}

@keyframes queue-animation {
    50% {
        transform: translateX(100%);
        height: 10rem;
        opacity: 0;
    }
    100% {
        transform: translateX(100%);
        height: 0;
        opacity: 0;
    }
}
</style>